<template>
  <div class="dashboard-container">
    <header class="dashboard-header">
      <h1>药品管理系统</h1>
      <div class="user-info">
        <span>欢迎，{{ username }}</span>
        <span class="user-type">({{ userType === 'admin' ? '管理员' : '用户' }})</span>
        <button @click="handleLogout" class="logout-btn">退出登录</button>
      </div>
    </header>

    <main class="dashboard-main">
      <nav class="dashboard-nav">
        <router-link to="/dashboard/drugs" class="nav-item">药品列表</router-link>
        <router-link to="/dashboard/cart" class="nav-item">
          购物车
          <span v-if="cartCount" class="badge">{{ cartCount }}</span>
        </router-link>
        <router-link to="/dashboard/orders" class="nav-item">我的订单</router-link>
      </nav>

      <div class="dashboard-content">
        <router-view @cart-count-updated="updateCartCount"></router-view>
      </div>
    </main>
  </div>
</template>

<script>
import axios from 'axios';
import { API_ENDPOINTS } from '../../api/config';

export default {
  name: 'UserDashboard',
  data() {
    return {
      username: '',
      userType: 'user',
      cartCount: 0
    }
  },
  created() {
    // 从localStorage获取用户信息
    const userInfo = JSON.parse(localStorage.getItem('user') || '{}');
    this.username = userInfo.username || '用户';
    this.userType = userInfo.role || 'user';
    this.fetchCartCount();
  },
  methods: {
    async fetchCartCount() {
      try {
        const response = await axios.get(API_ENDPOINTS.CART.COUNT);
        this.cartCount = response.data.count;
      } catch (error) {
        console.error('获取购物车数量失败:', error);
      }
    },
    updateCartCount(count) {
      this.cartCount = count;
    },
    handleLogout() {
      // 清除用户信息
      localStorage.removeItem('user');
      localStorage.removeItem('token');
      // 跳转到登录页
      this.$router.push('/');
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.dashboard-header {
  background-color: #fff;
  padding: 1rem 2rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dashboard-header h1 {
  margin: 0;
  color: #2c3e50;
  font-size: 1.5rem;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.user-type {
  color: #666;
  font-size: 0.9rem;
}

.logout-btn {
  padding: 0.5rem 1rem;
  background-color: #dc3545;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.logout-btn:hover {
  background-color: #c82333;
}

.dashboard-main {
  display: flex;
  padding: 2rem;
  gap: 2rem;
  flex-grow: 1;
}

.dashboard-nav {
  width: 200px;
  background-color: #fff;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 0.8rem 1rem;
  color: #2c3e50;
  text-decoration: none;
  border-radius: 4px;
  margin-bottom: 0.5rem;
  transition: background-color 0.3s;
}

.nav-item:hover {
  background-color: #f8f9fa;
}

.nav-item.router-link-active {
  background-color: #42b983;
  color: white;
}

.badge {
  background: #e74c3c;
  color: white;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 0.8em;
  margin-left: auto;
}

.dashboard-content {
  flex: 1;
  background-color: #fff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}
</style> 